import React from 'react'
import Tab from 'lib/components/tab.jsx'
import View from './View.jsx'
import imgSrc from 'lib/util/ImageSource'
import Resizable from 'lib/components/Resizable.jsx';

export default class AndroidBetaView extends View{
  constructor(props, context) {
    super(props, context);

    this.state.maxWidth = 100;
  }

  resizeImage(current) {
    if (this.state.maxWidth + 90 !== current.width) {
      this.setState({
        maxWidth: current.width - 90
      })
    }
  }

  render(){
    return (
      <Resizable onResize={ this.resizeImage.bind(this) }>
        <fieldset>
          <legend>1. 命名你的应用程序</legend>
          <div className="form-section">
            <p>Agent 安装成功后，你可以随时重命名你的应用程序</p>
            {
              this.renderForm()
            }
          </div>
        </fieldset>
        <fieldset>
          <legend>2. 选择开发环境</legend>
          <div className="form-section">
            <p className="note-attention">推荐使用 Ant 安装方式。</p>
            <p className="note-attention">注意：Agent 不支持只有 jre 的运行环境。</p>
            <Tab tabActive={1}>
            <Tab.Panel title='Ant(IDEA)'>
              <div className="form-section">
                <ul className="form-ul">
                  <li>
                    <h5>2.1. 下载 OneAPM Agent</h5>
                    <a className="btn-download" download target="_blank" href="https://download.oneapm.com/android_agent/beta/OneAPM_Android_Ant-lastest-beta.zip">
                      <i className="iconfont">&#xe650;</i>OneAPM_Android_Agent.zip
                    </a>
                  </li>
                  <li>
                    <p>
                      <a target="_blank" href="http://www.oneapm.com/docs/mi/IntelliJ%20IDEA%20eclipse%20%E9%A1%B9%E7%9B%AE%E5%AE%89%E8%A3%85%E6%96%B9%E6%B3%95.html">IDEA 安装方法链接</a>
                    </p>
                  </li>
                  <li>
                    <h5>2.2. 添加 OneAPM 至你的 App</h5>
                    <p>复制文件 <code>OneAPM_Android_Ant_[version]/oneapm-android-agent.jar</code> 到你的 App 目录 libs 下。</p>
                  </li>
                  <li>
                    <h5>2.3. 配置环境变量</h5>
                    <p>添加 <code>class.rewriter.jar</code> 到 ANT_OPTS 环境变量。通过更改 ANT_OPTS 环境变量，将 OneAPM 添加至 Ant 加载选项中。</p>
                    <ul className="form-ul">
                      <li> ● Mac OS / Linux平台：<code>{'export ANT_OPTS="-javaagent:/path/to/OneAPM_Android_Ant_{version}/class.rewriter.jar"'}</code></li>
                      <li> ● Windows平台：<code>{'set ANT_OPTS="-javaagent:C:\\path\\to\\OneAPM_Android_Ant_{version}\\class.rewriter.jar"'}</code></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </Tab.Panel>
            <Tab.Panel title='Eclipse'>
              <div className="form-section">
                <ul className="form-ul">
                  <li>
                    <p>注意：</p>
                    <p className="note-attention">
                      <span>1、Eclipse 插件只支持 JDK 运行环境（不支持只有 JRE 的运行环境）。</span><br/>
                      <span>2、Window 安装 Eclipse 插件时，请在没有空格和特殊字符的路径安装 JDK。</span><br/>
                      <span style={{display: 'inline-block'}}>3、Eclipse 插件需要使用 JAVA_HOME 环境变量，请检查环境变量,如果提示 SDK 安装后提示错误信息：由于使用 JRE 运行 Eclipse 导致 OneAPM 无法正确加载，<br/>请参考链接：https://oneapm.kf5.com/posts/view/48050/</span>
                    </p>
                  </li>
                  <li>
                    <h5>OneAPM Android SDK支持在 Eclipse 集成开发环境中直接使用和部署。</h5>
                    <h5><b>（1）查看 Eclipse 版本号</b></h5>
                    <p>
                      OneAPM Eclipse 插件支持 Eclipse 3.8~4.4 及以上版本，请于安装前确认您使用的 Eclipse 版本号
                    </p>
                    <p>Mac OS 下</p>
                    <code>点击进入“关于 Eclipse”</code>
                    <p>Windows 下</p>
                    <code>点击进入“About Eclipse”或者是“About ADT”</code>
                    <p>
                      i. 点击Help, 打开 “关于 Eclipse” 可查看当前版本号
                    </p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-1.png')} />
                    <p>
                      ii. 如下图所示, 红色方框内的版本号信息.(如未见详细版本号,可点击进人“Eclipse Plugin”查看,详见步骤iii)
                    </p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-2.png')} />
                    <p>iii.如果您的eclipse版本号在上图中没有出现, 可以点击上图中的底部 Eclipse 图标,点击后弹出对话框, 如下图所示:</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-3.png')} />
                  </li>
                  <li>
                    <h5><b>（2）安装 OneAPM Eclipse 插件：</b></h5>
                    <p>i. 在 Eclipse 集成开发环境中点击“Help”菜单，选择“Install New Software...”</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-4.png')} />
                    <p>ii.  点击Work with项右侧的“Add…”按钮来增加 OneAPM Eclipse 插件。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-5.png')} />
                    <p>iii. 设置插件的名称（比如OneAPM）以及URL地址：</p>
                    <p>Eclipse 插件需要 JAVA_HOME 环境变量，目前已支持最新 4.4 版本 Eclipse。</p>
                    <p className="note">Eclipse 4.4 及之后版本请使用以下链接：</p>
                    <code>https://download.oneapm.com/android_agent/beta/eclipse/gt_4.4/</code>
                    <p className="note-attention">注：OneAPM Eclipse 4.4 插件需要 JDK 1.8。</p>
                    <p className="note">Eclipse 4.4 之前版本请使用以下链接：</p>
                    <code>https://download.oneapm.com/android_agent/beta/eclipse/lt_4.4/</code>
                    <p>例如, Eclipse 4.4版本就可使用</p>
                    <code>https://download.oneapm.com/android_agent/beta/eclipse/gt_4.4/</code>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-6.png')} />
                    <p>iv. 在Work with选项中选中刚才添加的资料库，在下方列表中点击“Select All”选中所有的插件。点击“Next >”到下一步。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-7.png')} />
                    <p>v. 查看插件描述并点击“Next >”进入下一步。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-8.png')} />
                    <p>vi. 查看许可协议，选择“I accept the terms of the license agreement”，点击“Finish>”进入下一步。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-9.png')} />
                    <p>vii. 选择信任插件的签名证书，点击“OK”。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-10.png')} />
                    <p>viii. 点击“Yes”重启 Eclipse 来完成插件的安装。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-11.png')} />
                  </li>
                  <li>
                    <h5><b>（3）给 Eclipse 中的 Android 项目安装 OneAPM</b></h5>
                    <p>插件安装完成后，右击需要监控的 App，选择“安装OneAPM”</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-12.png')} />
                    <p>Eclipse 会自动添加“oneapm-android-agent.jar”包到libs目录下，若没有libs目录请新建一个。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-13.png')} />
                  </li>
                </ul>
              </div>
            </Tab.Panel>
            <Tab.Panel title='Android Studio（Gradle）'>
              <div className="form-section">
                <ul className="form-ul">
                  <li>
                    <h5>下载并解压 OneAPM SDK</h5>
                    <a className="btn-download" download target="_blank" href="https://download.oneapm.com/android_agent/beta/OneAPM_Android_Gradle-lastest-beta.zip"><i className="iconfont">&#xe650;</i>OneAPM_Android_Agent.zip</a>
                  </li>
                  <li>
                    <h5>拷贝插件</h5>
                    <p>首先我们将 plugin 文件夹整体拷贝到项目根目录, 具体如下图所示</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-1.png')} alt=""/>
                    <p>打开工程根目录下的 build.gradle 文件</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-2.png')} alt=""/>
                    <p>在 dependencies 模块中加入代码</p>
                    <code>{"classpath fileTree(dir: 'plugin', include: ['*.jar'])"}</code>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-3.png')} alt=""/>
                  </li>
                  <li>
                    <h5>引入 OneAPM</h5>
                    <p>将agent文件夹下的 oneapm-android-agent.jar 文件拷贝至项目libs目录下(如没有此目录请自行创建)</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-4.png')} alt=""/>
                    <p>打开主模块目录下的 build.gradle 文件</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-5.png')} alt=""/>
                    <p>在文件头部引入 OneAPM</p>
                    <code>{"apply plugin: 'oneapm'"}</code>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-6.png')} alt=""/>
                    <p>如此即完成了 oneapm 的引入</p>
                    <p>建议 Rebuild & Clean 项目，来确保 OneAPM 配置生效。</p>
                    <p className="note-attention">* 建议检查一下主模块目录下的 build.gradle 文件中的这行代码</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-reference.png')} alt=""/>
                  </li>
                </ul>
              </div>
            </Tab.Panel>
            <Tab.Panel title='Maven'>
             <div className="form-section">
               <ul className="form-ul">
                 <p className="note-attention">下面配置使用到的PLUGIN_VERSION，需要替换成解压后相应的版本号。例如：下载版本为OneAPM_Android_Maven_2.0.2，需将PLUGIN_VERSION设置为2.0.2。</p>
                 <p className="note-attention">下面配置使用到的PATH_TO_ONEAPM_MAVEN_PATH，需要替换成您本机路径。例如: <code>-Dfile=c:\OneAPM\oneapm-android-agent.jar</code></p>
                 <li>
                   <h5>2.1. 下载 maven 插件</h5>
                   <a className="btn-download" download target="_blank" href="https://download.oneapm.com/android_agent/beta/OneAPM_Android_Maven-lastest-beta.zip">
                     <i className="iconfont">&#xe650;</i>OneAPM_Android_Maven_Plugin.zip
                   </a>
                 </li>
                 <li>
                   <h5>2.2. 解压插件</h5>
                   <p>假设解压之后的路径是 PATH_TO_ONEAPM_MAVEN_PATH 后续会用到；解压之后会有3个 .jar 文件一个.pom 文件，这些文件下面的操作步骤会用到。</p>
                 </li>
                 <li>
                   <h5>2.3. 注册解压后文件夹中的jar包为本地maven库</h5>
                   <ul className="form-ul">
                     <li>
                       <p><b>注册oneapm-android-agent.jar</b></p>
                       <code>{"mvn install:install-file -DgroupId=com.oneapm.agent.android  -DartifactId=agent.android   -Dversion=PLUGIN_VERSION  -Dpackaging=jar -Dfile=PATH_TO_ONEAPM_MAVEN_PATH/oneapm-android-agent.jar"}</code>
                     </li>
                     <li>
                       <p><b>注册class.rewriter.jar</b></p>
                       <code>mvn install:install-file -DgroupId=com.oneapm.agent.android  -DartifactId=class.rewriter  -Dversion=PLUGIN_VERSION  -Dpackaging=jar -Dfile=PATH_TO_ONEAPM_MAVEN_PATH/class.rewriter.jar</code>
                     </li>
                     <li>
                       <p><b>注册oneapm-android-maven-plugin.jar</b></p>
                       <code>mvn install:install-file -DgroupId=com.oneapm.agent.android  -DartifactId=plugin.maven  -Dversion=PLUGIN_VERSION  -Dpackaging=jar  -Dfile=PATH_TO_ONEAPM_MAVEN_PATH\plugin.maven.jar -DpomFile=PATH_TO_ONEAPM_MAVEN_PATH\plugin.maven.pom</code>
                       <p>例如：</p>
                       <code>mvn install:install-file -DgroupId=com.oneapm.agent.android  -DartifactId=plugin.maven  -Dversion=PLUGIN_VERSION  -Dpackaging=jar  -Dfile=E:\agent\gitlab\android-maven-plugin\target\plugin.maven.jar -DpomFile=E:\agent\gitlab\android-maven-plugin\target\plugin.maven.pom</code>
                       <p className="note-attention">注意：-Dfile=这个后面一定不要有空格，否则运行maven会报错！！！</p>
                     </li>
                   </ul>
                 </li>
                 <li>
                   <h5>2.4. 配置本地pom.xml文件，添加刚才注册的jar包，如下依赖：</h5>
                   <code>
                     {"<dependency>"}<br/>
                     {"<groupId>com.oneapm.agent.android</groupId>"}<br/>
                     {"<artifactId>agent.android</artifactId>"}<br/>
                     {"<version>PLUGIN_VERSION</version>"}<br/>
                     {"</dependency>"}<br/>
                     {"插件: "}<br/>
                     {"<plugin> "}<br/>
                     {"<groupId>com.oneapm.agent.android</groupId> "}<br/>
                     {"<artifactId>plugin.maven</artifactId>"}<br/>
                     {"<version>PLUGIN_VERSION</version>"}<br/>
                     {"<executions>"}<br/>
                     {"<execution>"}<br/>
                     {"<goals>"}<br/>
                     {"<goal>instrument</goal>"}<br/>
                     {"</goals>"}<br/>
                     {"</execution>"}<br/>
                     {"</executions>"}<br/>
                     {"</plugin>"}
                   </code>
                   <p>完整pom.xml文件如下所示:</p>
                   <code>
                     {"<groupId>xxx.yyy.zzzz</groupId>"}<br/>
                         {"<artifactId>TestMavenAndroid02</artifactId>"}<br/>
                         {"<version>1.0</version>"}<br/>
                         {"<packaging>apk</packaging>"}<br/>
                         {"<dependencies>"}<br/>
                             {"<dependency>"}<br/>
                                 {"<groupId>com.google.android</groupId>"}<br/>
                                 {"<artifactId>android</artifactId>"}<br/>
                                 {"<version>4.1.1.4</version>"}<br/>
                                 {"<scope>provided</scope>"}<br/>
                             {"</dependency>"}<br/>
                             {"<dependency>"}<br/>
                                 {"<groupId>com.oneapm.agent.android</groupId>"}<br/>
                                 {"<artifactId>agent.android</artifactId>"}<br/>
                                 {"<version>PLUGIN_VERSION</version>"}<br/>
                             {"</dependency>"}<br/>
                         {"</dependencies>"}<br/>
                         {"<build>"}<br/>
                             {"<finalName>${project.artifactId}</finalName>"}<br/>
                             {"<sourceDirectory>src</sourceDirectory>"}<br/>
                             {"<plugins>"}<br/>
                                 {"<plugin>"}<br/>
                                     {"<groupId>com.jayway.maven.plugins.android.generation2</groupId>"}<br/>
                                     {"<artifactId>android-maven-plugin</artifactId>"}<br/>
                                     {"<version>4.0.0-rc.2</version>"}<br/>
                                     {"<configuration>"}<br/>
                                         {"<sdk>"}<br/>
                                             {"<platform>19</platform>"}<br/>
                                         {"</sdk>"}<br/>
                                         {"<manifest>"}<br/>
                                             {"<debuggable>true</debuggable>"}<br/>
                                         {"</manifest>"}<br/>
                                     {"</configuration>"}<br/>
                                     {"<extensions>true</extensions>"}<br/>
                                 {"</plugin>"}<br/>
                         {"<plugin>"}<br/>
                           {"<groupId>com.oneapm.agent.android</groupId>"}<br/>
                           {"<artifactId>plugin.maven</artifactId>"}<br/>
                           {"<version>PLUGIN_VERSION</version>"}<br/>
                           {"<executions>"}<br/>
                             {"<execution>"}<br/>
                               {"<goals>"}<br/>
                                 {"<goal>instrument</goal>"}<br/>
                               {"</goals>"}<br/>
                             {"</execution>"}<br/>
                           {"</executions>"}<br/>
                           {"</plugin>"}<br/>
                             {"</plugins>"}<br/>
                         {"</build>"}<br/>
                   </code>
                 </li>
               </ul>
             </div>
            </Tab.Panel>
          </Tab>
          </div>
        </fieldset>
        <fieldset>
          <legend>3. 配置授权信息</legend>
          <div className="form-section">
            <ul className="form-ul">
              <li>
                <h5>确保应用程序的 AndroidManifest.xml 配置文件中，引入 INTERNET 和 ACCESS_NETWORK_STATE 三个请求授权</h5>
                <code>
                  {'<uses-permission android:name="android.permission.INTERNET" />'}
                  <br />
                  {'<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />'}
                  <br/>
                  {'<uses-permission android:name="android.permission.READ_PHONE_STATE" />'}
                </code>
              </li>
              <li>
                <h5>若想使用 Crash 快照功能，请引入以下授权信息</h5>
                <code>{'<uses-permission android:name="android.permission.GET_TASKS" />'}</code>
              </li>
              <li>
                <h5>如果使用基站定位，请添加如下权限：</h5>
                <code>
                  {'<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />'}
                </code>
              </li>
            </ul>
          </div>
        </fieldset>
        <fieldset>
          <legend>4. 启动Agent</legend>
          <div className="form-section">
            <p>在待监测App的入口Activity （Main Activity）源文件中导入OneApmAgent类</p>
            <code>import com.oneapm.agent.android.OneApmAgent;</code>
            <p>在 onCreate() 方法中加入如下方法来初始化OneAPM（其中包含了根据应用程序名称而生成的授权编号）</p>
            <code>{'OneApmAgent.init(this).setToken("'+this.getToken()+'").start();'}</code>
            <p>配置渠道信息，在AndroidManifest.xml文件中添加meta-data项，要添加在Application标签内部</p>
            <code>{'<meta-data   android:name = "BluewareChannel"     android:value="***"   />'}</code>
            <p className="note-attention">***代表App的发布渠道，如下图所示:</p>
            <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/agent.png')} />
          </div>
        </fieldset>
        <fieldset>
          <legend>5. 添加统计分析功能</legend>
          <div className="form-section">
            <p>在每个 Activity 中导入 OneApmAnalysis 类</p>
            <code>import com.oneapm.agent.android.module.analysis.OneApmAnalysis;</code>
            <p>在每个 Activity 的 onPause() 方法中添加代码:</p>
            <code>OneApmAnalysis.onPause();</code>
            <p>如下图所示：</p>
            <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/eclipse-statistics-onpause.png')} />
            <p>在每个 Activity 的 onResume() 方法中添加代码:</p>
            <code>OneApmAnalysis.onResume();</code>
            <p>如下图所示：</p>
            <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/eclipse-statistics-onresume.png')} />
            <p className="note-attention">注意：如果两个Activity是继承关系，只需要在父Activity添加即可，如果在两个Activity中同时添加，则会造成重复统计。</p>
          </div>
        </fieldset>
        <fieldset>
          <legend>6. 用户信息追踪功能</legend>
          <div className="form-section">
            <p>如果您想在发生性能问题的时候追踪用户信息，Android探针提供了对于Crash或者慢trace的时候关联自定义用户信息的功能，请参考:https://oneapm.kf5.com/posts/view/57589/</p>
          </div>
        </fieldset>
        <fieldset>
          <legend>7. WebView 性能监控（可选）</legend>
          <div className="form-section">
            <p>如果你需要开启此功能，请参考 <a href="https://oneapm.kf5.com/posts/view/45662/" target="_blank">WebView 性能监控使用说明</a>。</p>
          </div>
        </fieldset>
        <fieldset>
          <legend>8. 设置proguard混淆器</legend>
          <div className="form-section">
            <p>如果待监测的App使用ProGuard工具来优化发布的apk包，为了保证OneAPM监测SDK可以正常使用，请在所属项目的proguard.cfg文件中加入以下的内容：</p>
            <code>
              {'-dontwarn org.apache.commons.**'}<br/>
              {'-keep class org.apache.http.impl.client.**'}<br/>
              {'-dontwarnorg.apache.commons.**'}<br/>
              {'-keep class com.blueware.** { *; }'}<br/>
              {'-dontwarn com.blueware.**'}<br/>
              {'-keep com.oneapm.** {*;}'}<br/>
              {'-dontwarn com.oneapm.**'}<br/>
              {'-keepattributes Exceptions, Signature, InnerClasses'}
            </code>
            <p className="note-attention">注意：如果您希望保留行号信息，建议您在proguard.cfg中添加如下代码：</p>
            <code>{'-keepattributesSourceFile,LineNumberTable'}</code>
          </div>
        </fieldset>
        <fieldset>
          <legend>9. clean 项目工程</legend>
          <div className="form-section">根据不同的打包工具，Clean一下项目工程。</div>
        </fieldset>
        <fieldset>
          <legend>10. 启动应用程序，集成验证</legend>
          <div className="form-section">
            <p>启动项目安装集成之后的apk到手机或者模拟器，使用LogCat过滤TAG = oneapm查看log日志出现如下log（oneapm is running normally ...）表示嵌码成功。</p><br/>
            <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/eclipse-start.png')} />
          </div>
        </fieldset>
        <fieldset>
          <legend>11. 静候 5 分钟，开启 OneAPM 之旅</legend>
          <div className="form-section">
            <p>静候 5 分钟，等待应用程序向 OneAPM 发送应用程序性能数据，即可开始使用 OneAPM 应用性能管理。</p>
          </div>
        </fieldset>
      </Resizable>
    )
  }
}
